<template>
  <div class="photo-container">
    <!-- 这里mui-fullscreen类名会铺满屏幕，去掉 -->
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item', item.id==0?'mui-active':'']"
            v-for="item in photoCategory"
            :key="item.id"
            @click="getPhotoList(item.id)"
          >{{item.title}}</a>
        </div>
      </div>
    </div>
    <ul>
      <router-link tag='li' v-for="item in  photoList" :key="item.id" :to="'/home/photoinfo/'+item.id">
        <img v-lazy="item.img_url">
        <div class="info">
            <h1 class="info-title">
              {{item.title}}
            </h1>
            <div class="info-body">
                {{item.zhaiyao}}
            </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
// 区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top和 height）

// 若使用区域滚动组件，需手动初始化scroll控件
import mui from "../../lib/mui/js/mui.min.js";

export default {
  data() {
    return {
      photoCategory: [], //图片分享中的分类
      photoList: [] //图片分类
    };
  },
  created() {
    this.getPhotoCategory();
    this.getPhotoList(0); //默认调用全部
  },
  methods: {
    //获取图片分享title
    getPhotoCategory() {
      this.$http.get("api/getimgcategory").then(result => {
        if (result.body.status == 0) {
          //这里先调用unshift()，在赋值给this.photoCategory,否则无法显示
          result.body.message.unshift({ id: 0, title: "全部" });
          this.photoCategory = result.body.message;
          //   console.log(this.photoCategory);
        }
      });
    },
    // 根据图片分类获取图片列表
    getPhotoList(categoryId) {
      this.$http.get("api/getimages/" + categoryId).then(result => {
        if (result.body.status == 0) {
          this.photoList = result.body.message;
        }
      });
    }
  },
  mounted() {
    //这是组件路由dom对象加载完毕后的钩子函数，
    //将初始化scroll控件放在这里，可以确保页面已加载就可以滚动，无需手动刷新
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  }
};
</script>
<style lang="scss" scoped>
* {
  //这是为了防止在滚动分类时，报错：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
  touch-action: none;
}
ul{
    list-style: none;
    margin: 0;
    padding: 10px 0;
    li{
       background-color: #cccccc;
        margin-bottom: 10px;
        position: relative;
        box-shadow: 0 0 9px #999;
        //懒加载图标居中显示
        text-align: center;
        img{
            width: 100%;
            vertical-align: middle;
        }
        .info{
            padding: 5px 0;
            position:absolute;
            bottom: 0;
            max-height: 88px;
            text-align: left;
            color: white;
            background: rgba(0,0,0,0.4);
            .info-title{
                font-size: 14px;
            }
            .info-body{
                font-size: 13px;
            }
        }
    }
}
//懒加载的图标
img[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
</style>
